<!--
 * @Author: fcli
 * @Date: 2023-09-04 10:32:44
 * @LastEditors: fcli
 * @LastEditTime: 2023-11-28 17:18:19
 * @FilePath: /scrollTrigger/src/App.vue
 * @Description: 
-->

<template>
    <section class="section flex-center column blue normal" ref="header">
      <div class="box">box</div>
      <div class="box">box</div>
      <div class="box">box</div>
    </section>
    <div class="section flex-center column normal" ref="top">
      <div class="box">box</div>
      <div class="box">box</div>
      <div class="box">box</div>
    </div>
    <div class="section flex-center column" ref="main">
      <div class="box">box</div>
      <div class="box">box</div>
      <div class="box">box</div>
    </div>
    <section class="section flex-center orange column" ref="bottom"> 
      <div class="box">box</div>
      <div class="box">box</div>
      <div class="box">box</div>
    </section>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const main = ref();
const top=ref();
const bottom=ref();
const header=ref();
let ctx:any;

onMounted(() => {
   ctx = gsap.context((self:any) => {
    const boxes = self.selector('.box');
    boxes.forEach((box:any) => {
       gsap.to(box, {
        x: 300,
        scrollTrigger: {
          trigger: box,
          start: 'top 40%',
          end: '+=500',
          scrub: true,
        },
      });
    });
  }, header.value); 


  ctx = gsap.context((self:any) => {
    const boxes = self.selector('.box');
    boxes.forEach((box:any) => {
      gsap.to(box, {
        x: -300,
        scrollTrigger: {
          trigger: box,
          start: 'top 40%',
          end: '+=500',
          scrub: true,
        },
      });
    });
  }, top.value); 

    ctx = gsap.context((self:any) => {
    const boxes = self.selector('.box');
    boxes.forEach((box:any) => {
     gsap.to(box, {
        x: 150,
        scrollTrigger: {
          trigger: box,
          start: 'bottom bottom',
          end: 'top 20%',
          scrub: true,
        },
      });
    });
  }, main.value); 


  ctx = gsap.context((self:any) => {
    const boxes = self.selector('.box');
    boxes.forEach((box:any) => {
      gsap.to(box, {
        x: -150,
        scrollTrigger: {
          trigger: box,
          start: 'top 80%',
          end: '+=100',
          scrub: true,
        },
      });
    });
  }, bottom.value); 
});

onUnmounted(() => {
  ctx.revert(); 
});
</script>

<style>
.normal{
  display: flex;
  flex-direction: row;
}
</style>